<!-- 收藏 -->
<template>
    <el-row type="flex">
        <el-col :xs="24" :md="12">
            <el-row :gutter="10">
                <el-col :xs="24" :md="12" :lg="6">
                    <el-input v-model="searchKey" placeholder="请输入名称搜索" clearable></el-input>
                </el-col>
                <el-col :xs="24" :md="12" :lg="6">
                    <el-select v-model="selectState" placeholder="状态" clearable>
                        <el-option v-for="item in stateList" :key="item.id" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
            </el-row>
        </el-col>
        <el-col :xs="24" :md="12">
            <el-row justify="end" align="middle">
                <el-button type="primary" v-auth="'client:favorite:query'" @click="getTableData">查询</el-button>
                <el-button type="primary" v-auth="'client:favorite:add'" @click="operateClick('add')">新增</el-button>
            </el-row>
        </el-col>
    </el-row>
    <el-divider class="margin-top-down"></el-divider>
    <el-table 
        :data="tableData" 
        border 
        width="100%"
        :height="tableHeight" 
        stripe
        v-loading="tableLoading">
            <el-table-column type="index" label="编号" header-align="center" align="center" min-width="50"></el-table-column>
            <el-table-column label="类别名称" prop="typeName" show-overflow-tooltip header-align="center" align="center" min-width="100"></el-table-column>
            <el-table-column label="网站名称" prop="name" header-align="center" align="center" min-width="100"></el-table-column>
            <el-table-column label="网站地址" prop="url" header-align="center" align="center" min-width="100"></el-table-column>
            <el-table-column label="网站简介" prop="desc" header-align="center" align="center" min-width="100"></el-table-column>
            <el-table-column label="状态" prop="state" header-align="center" align="center" min-width="100">
                <template #default="scope">
                    <el-tag type="success" v-if="scope.row.state">正常</el-tag>
                    <el-tag type="danger" v-else>停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createdAt" show-overflow-tooltip header-align="center" align="center" min-width="100" :formatter="setFormatter"></el-table-column>
            <el-table-column label="更新时间" prop="updatedAt" show-overflow-tooltip header-align="center" align="center" min-width="100" :formatter="setFormatter"></el-table-column>
            <el-table-column label="操作" width="340" header-align="center" align="center" fixed="right">
                <template #default="scope">
                    <el-button type="info" plain @click="operateClick('view', scope.row)">查看</el-button>
                    <el-button type="warning" v-auth="'client:sort:update'" plain @click="operateClick('update', scope.row)">修改</el-button>
                    <el-button type="danger" v-auth="'client:sort:delete'" plain @click="deleteClick(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row justify="end" class="public-margin-top">
            <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[20, 50, 100, 200]"
            :small="true"
            :disabled="false"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </el-row>
        <FavoriteOperate ref="favoriteOperateRef" @updateParentList="getTableData"></FavoriteOperate>
</template>

<script setup>
import FavoriteOperate from './favorite-operate.vue';
import { favoriteApi } from '@/api/article/favorite/favorite-api';
import { setTableHeight } from '@/utils/tools-util';
import { formatTimeToStr } from '@/utils/date-util';
import { ElMessage, ElMessageBox } from 'element-plus';

// ========================= 实列挂载之前调用 =========================
onBeforeMount(() => {
    getTableData();
})

// ========================= 实列挂载之后调用 =========================
onMounted(() => {
    tableHeight.value = setTableHeight();
});

// ========================= 监听窗口变化 =========================
let tableHeight = ref(0);
window.onresize = () => {
    tableHeight.value = setTableHeight();
};

// ========================= 表格 =========================
let searchKey = ref('');                        // 搜索值
let selectState = ref('');                      // 状态
const tableData = ref([]);                      // 表格数据
let tableLoading = ref(false);                  // 表格加载控制
let stateList = reactive([                      // 状态列表
    {id:1, label:'正常', value:true},
    {id:2, label:'停用', value:false},
]);

// 数据查询
async function getTableData() {
    try {
        let conditions = {
            params: {
                name: searchKey.value,
                state: selectState.value
            },
            limit: pageSize.value,
            offset: currentPage.value,
            
        };
        tableLoading.value = true;
        const res = await favoriteApi.list(conditions);
        if(res.meta.status !== 200) throw new Error(res.meta.msg);
        total.value = res.data.count;
        tableData.value = res.data.data;
        tableLoading.value = false;
    } catch (e) {
        console.error(e);
    } finally {
        tableLoading.value = false;
    };
};

// ========================= 分页 =========================
let currentPage = ref(1);
let pageSize = ref(20);
let total = ref(0);

function handleSizeChange(val) {
    pageSize.value = val;
    getTableData();
};

function handleCurrentChange(val) {
    currentPage.value = val;
    getTableData();
};

// ========================= 操作 =========================
// 数据新增
const favoriteOperateRef = ref();
function operateClick(type, row) {
    favoriteOperateRef.value.onShowDialog(type, row);
};

// 数据删除
function deleteClick(row) {
    ElMessageBox.confirm(
        '确定要删除当前收藏网站吗？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        try {
            let params = {
                id: row.id
            };
            const res = await favoriteApi.delete(params);
            if(res.meta.status !== 200) throw new Error(res.meta.msg);
            ElMessage.success('删除成功');
            getTableData();
        } catch (e) {
            console.error(e);
            ElMessage.error(e.message);
        };
    });
};


// 格式化内容
function setFormatter(row, column, cellValue, inedx) {
    return formatTimeToStr(cellValue)
};
</script>

<style lang="scss" scoped>

</style>
